import React from 'react'
import { useNavigate } from 'react-router-dom'
import style from './index.module.less'
import IconSvg from '@/components/IconSvg'
import BottomImage from '@/assets/images/appleJoin.png'
import { appleJoin } from './context'
import store from './hooks/index'
import FromComponent from './form/index'

export default () => {
  const pushRouter = useNavigate()
  const appleJoinStore = store()
  return (
    <appleJoin.Provider value={appleJoinStore}>
      <div className={style.appleJoin}>
        <div className={style.imageBox}>
          <img src={BottomImage} />
        </div>
        {/* 复用的东西 */}
        <div className={style.top}>
          <div className={style.iconSvg}>
            <IconSvg
              name='gobackLogin'
              onClick={() => {
                pushRouter('/user/login')
              }}
            />
          </div>
          <div
            onClick={() => {
              pushRouter('/user/login')
            }}
            style={{ color: '#5684ff', marginLeft: 7 }}
          >
            返回登录页
          </div>
        </div>
        {/* 复用的东西 */}

        <div className={style.bottom}>
          <div className={style.centerForm}>
            <FromComponent />
          </div>
        </div>
      </div>
    </appleJoin.Provider>
  )
}
